<template>
  <div @click="$router.push(`/article/${detailitem.id}`)">
    <div class="detailItem">
        <div class="imgparent">
            <img  v-if="detailitem.img" :src="detailitem.img" alt="" style="width:100%">
            <div class="bottom">
                <div class="iconfont icon-bofangqi">
                     <span class="video">1233</span>
                </div>
                <div class="iconfont icon-text">
                    <span class="comment">{{detailitem.commentlen}}</span>
                </div>
            </div>
        </div>
        <p>{{detailitem.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
    props:['detailitem']
}
</script>

<style lang="stylus" scoped>
  .detailItem
    margin-bottom 2.7778vw 
    border 0.2778vw solid red
    box-sizing border-box
    width 46.9vw
    height 32.4vw
    .imgparent
      position relative
      width 100%
      height 26.0667vw
      .bottom
        position absolute
        bottom 0.2778vw
        padding 0 2.2222vw
        display flex
        justify-content space-between
        color white
        left 0
        right 0
        background linear-gradient(1deg,rgba(0,0,0,85),transparent)
    p
      font-size 3.333vw
</style>